<template>
	<div class="todo-footer"  v-show="total">
		<label>
			<input type="checkbox" :checked="isAllChecked" @change="handleChange($event.target.checked)"/>
		</label>
		<span>
        <span>全选{{doneTotal}}</span> / 全部{{total}}
        </span>
		<button class="btn btn-danger" @click="handleClick">清除已完成任务</button>
	</div>
</template>
<script>
	import {mapGetters, mapMutations} from 'vuex';
	export default {
		name: 'Footer',
		computed: {
			...mapGetters(["total", "doneTotal", 'isAllChecked'])
		},
		methods:{
			...mapMutations({handleChange: "CHECK_ALL_TODO", handleClick: "CLEAR_ALL_TODO_DONE",})
		}
	}
</script>
<style scoped>
	.todo-footer {
		height: 40px;
		line-height: 40px;
		padding-left: 6px;
		margin-top: 5px;
	}

	.todo-footer label {
		display: inline-block;
		margin-right: 20px;
		cursor: pointer;
	}

	.todo-footer label input {
		position: relative;
		top: -1px;
		vertical-align: middle;
		margin-right: 5px;
	}

	.todo-footer button {
		float: right;
		margin-top: 5px;
	}
</style>